<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>居逸商城</title>
		    <link rel="icon" href="/icon/favicon.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="/mi/font/iconfont.css"/>	<!-- 引用图标 -->
		<link rel="stylesheet" type="text/css" href="/mi/CSS/reset.css"/>	<!-- 样式重置 -->
		<link rel="stylesheet" type="text/css" href="/mi/CSS/currency.css"/>
		<link rel="stylesheet" type="text/css" href="/mi/CSS/index.css"/>	<!-- 首页样式 -->
	</head>
	<body>

	<th:block th:include="header"/>

		<!-- banner轮播图 -->
	<div class="banner-bg" >
		<div class=" layui-carousel  container banner" id="test10">
			<ul class="nav-list">
				<li th:each="category:${categories}">
					<p th:text="${category.name}"></p>
					<div class="item-list">
						<ul>
							<li th:each="sub:${category.list}">
								<img th:src="${sub.imgPath}" alt="" src="" width="32px" height="32px">
								<span th:text="${sub.name}"></span>
							</li>
						</ul>
					</div>
				</li>
			</ul>
			<div carousel-item style="position:static">
				<div th:each="banner:${bannerList}">
					<img th:src="${banner.path}" width="1226px" height="430px" alt="#" src="">
				</div>
			</div>
		</div>
	</div>
		<!-- 页面右侧固定版块 -->
		<div class="right-fix">
			<ul>
				<li class="iconfont icon-shouji">
					<div class="number-qrode">
						<img src="/img/a4.png" width="691" alt="">
						<p>扫码领取新<br>人百元礼包</p>
					</div>
				</li>
				<li ><a class="iconfont icon-icon-" href="#" target="_blank"></a></li>
				<li class="iconfont icon-buoumaotubiao46"></li>
				<li class="iconfont icon-kefu"></li>
				<li><a class="iconfont icon-gouwuche" href="#" target="_blank"></a></li>
			</ul>
		</div>

		<!-- 四块广告版图 -->
		<div class="banner-bottom">
			<div class="container bottom">
				<ul>
					<li>
						<div class="banner-bottom-top">
							<ul>
								<li>
									<p class="iconfont icon-shizhong"></p>
									<p>保障服务</p>
								</li>
								<li>
									<p class="iconfont icon-icon_xinyong_xianxing_jijin-154"></p>
									<p>企业团购</p>
								</li>
								<li>
									<p class="iconfont icon-F_round"></p>
									<p>F 码通道</p>
								</li>
							</ul>
						</div>
						<div class="banner-bottom-foot">
							<ul>
								<li>
									<p class="iconfont icon-sim"></p>
									<p>米粉卡</p>
								</li>
								<li>
									<p class="iconfont icon-qian"></p>
									<p>以旧换新</p>
								</li>
								<li>
									<p class="iconfont icon-24huafei"></p>
									<p>话费充值</p>
								</li>
							</ul>
						</div>
					</li>
					<li><img src="/img/a1.png" alt="" width="398" height="511"></li>
					<li><img src="/img/a2.png" alt="" width="398" height="544"></li>
					<li><img src="/img/a3.png" alt="" width="356" height="472"></li>
				</ul>
			</div>
		</div>

		<!-- 汉服专栏 -->
		<div class="phone-box">
			<div class="container">
				<div class="phone-title">
					<h2>汉服</h2>
					<div class="search-more">
						查看更多<span class="iconfont icon-you "></span>
					</div>
				</div>
				<div class="phone-left">	<!-- 左侧单独展览 -->
					<img src="/img/hanfu.jpg" alt="" width="234px" height="614px">
				</div>
				<div class="phone-right">	<!-- 右侧分区展览 -->
					<div class="phone-right-top">
						<ul class="one" id="hanFuUL"></ul>
					</div>
				</div>
			</div>
		</div>


	<th:block th:include="footer"/>



		<script src="/mi/JS/index.js"></script>
		<script src="/layui-v2.6.8/layui/layui.js"></script>
		<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script src="/js/lay-module/common/common.js"></script>
		<script id="hanFuTemplate" type="text/html">
		{{# layui.each(d, function(i, v){ }}
		<li class="item">
			<a href="/product/detail?id={{v.id}}" target="_blank">
				<img src="/upload/{{ v.imgPath }}" class="pic" alt=""/>
				<h3 class="item-name" align="center">{{ v.name }}</h3>
				<p class="item-info">
					<span class="present-price">{{ v.title }}</span>
				</p><br/>
				<p class="item-price">
					<span class="present-price">￥ {{ v.price }} 起</span>
				</p>
			</a>
		</li>
		{{# }); }}
	</script>
		<script type="text/javascript" th:inline="none">

		layui.use(['laytpl', 'carousel'], function () {
			let $ = layui.jquery,
					laytpl = layui.laytpl,
					carousel = layui.carousel;

			//常规轮播
			carousel.render({
				elem: '#test10',
                width: '1226px',
				height: '430px',
                interval: 3000
			});

			// 获取最新的8个汉服
			$.get("/product/hanFu", function (hanFu) {
				laytpl($("#hanFuTemplate").html()).render(hanFu, function (ht) {
					$("#hanFuUL").html(ht);
				});
			}); //end get()

		});
	</script>
	</body>
</html>
